<template>
  <div>
    <van-search v-model="value" placeholder="根据收货人进行搜索" show-action shape="round" @search="onSearch">
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <van-tabs v-model="active" title-active-color="#26A2FF" color="#26A2FF" sticky swipeable>
      <van-tab title="全部">
        <customer-order-list ref="list0" @refresh="refresh"></customer-order-list>
      </van-tab>
      <van-tab title="待支付">
        <customer-order-list ref="list1" :payStatus="1" :state="0" @refresh="refresh"></customer-order-list>
      </van-tab>
      <van-tab title="待配送">
        <customer-order-list ref="list2" :payStatus="0" :state="0" @refresh="refresh"></customer-order-list>
      </van-tab>
      <van-tab title="配送中">
        <customer-order-list ref="list3" :payStatus="0" :state="1" @refresh="refresh"></customer-order-list>
      </van-tab>
      <van-tab title="已完成">
        <customer-order-list ref="list4" :payStatus="0" :state="2" @refresh="refresh"></customer-order-list>
      </van-tab>
      <van-tab title="已取消">
        <customer-order-list ref="list5" :state="3" @refresh="refresh"></customer-order-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import CustomerOrderList from '@/components/CustomerOrderList'
import OrderList from '@/views/Home/OrderList';
export default {
  components: {
    CustomerOrderList
  },
  data() {
    return {
      value: '',
      active: 0
    };
  },
  methods: {
    onSearch() {
      this.$refs['list' + this.active].getListBySearch(this.value);
    },
    //清空查询条件
    refresh(){
      this.value = '';
    }
  }
};
</script>
<style lang="less" scoped>
</style>
